<template>
   <div class="block">
    <el-carousel  height="500px">
      <el-carousel-item>
        <img style="width: 100%;height: 100%" src="~/assets/image/beijing1.png">
      </el-carousel-item>
      <el-carousel-item>
        <img style="width: 100%;height: 100%" src="~/assets/image/beijing2.png">
      </el-carousel-item>
      <el-carousel-item>
        <img style="width: 100%;height: 100%" src="~/assets/image/beijing3.png">
      </el-carousel-item>
    </el-carousel>

    <div class="jieshao">技术与框架</div>

    <el-row type="flex" justify="center" >
      <el-col :span="4" class="info">
        <img src="~/assets/image/vue.png" class="infoImage">
        <div class="title">Vue.js</div>
      </el-col>
      <el-col :span="4" class="info">
        <img src="~/assets/image/element.png" class="infoImage" style="width: 200px;">
        <div class="title">Element-ui</div>
      </el-col>
      <el-col :span="4" class="info">
        <img src="~/assets/image/ajax.png" class="infoImage" style="width: 180px;">
        <div class="title">Ajax</div>
      </el-col>
      <el-col :span="4" class="info"><div>111111111111</div></el-col>
    </el-row>

    <el-row type="flex" justify="center" >
      <el-col :span="4" class="info">
        <img src="~/assets/image/spring.jpg" style="width: 200px" class="infoImage">
        <div>Spring-boot</div>

      </el-col>
      <el-col :span="4" class="info"><div>EUREKA</div></el-col>
      <el-col :span="4" class="info"><div>REDIS</div></el-col>
      <el-col :span="4" class="info"><div>111111111111</div></el-col>
    </el-row>
  </div>

  
</template>

<style>

.jieshao{
  text-align: center;
  font-size: 25px;
  font-family: "微软雅黑";
  margin:100px auto 100px;
  letter-spacing: 5px;
}

.info{
  text-align: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 300px;
  height: 240px;
}

.title{
  margin-bottom: 10px; 
  font-size: 20px;
}



.infoImage{
  margin: 30px auto 10px; 
  width: 100px;
  height: 100px;
}

</style>

<script>


export default {
  data() {
      return {
        
      };
    },

}
</script>



